<script lang="ts" setup name="Father">
    import { ref } from 'vue';
    import Child from './Child.vue';

    let a = ref(1);
    let b = ref(2);
    let c = ref(3);
    let d = ref(4);

    function updateB(value: number) {
        b.value += value;
    }
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <div>a: {{ a }}</div>
        <div>b: {{ b }}</div>
        <div>c: {{ c }}</div>
        <div>d: {{ d }}</div>
        <!-- v-bind="{ x: 100, y: 200 }" 等价于 x="100" y="200" -->
        <Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" :updateB="updateB"/>
    </div>
</template>

<style scoped>
    .father {
        background-color: gray;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
    .son2 {
        margin-top: 10px;
    }
</style>